<script setup>
import {reactive} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";

const storeGroup = reactive({
  store:useStore(),
})

const routerGroup = reactive({
  router: useRouter(),
  route: useRoute(),
  linkRegister() {
    this.router.push({name: "register"});
  }
})

const dialogGroup = reactive({
  dialogVisible:false,
  dialogMessage:"",
})

const loginGroup = reactive({
  account: "",
  password: "",
  async userLogin() {
    await storeGroup.store.dispatch("userLogin",{account:this.account,password:this.password});
    if (storeGroup.store.state.user.userState.loginState){
      await routerGroup.router.push({name: "user"});
      routerGroup.router.go(0);
    }else{
      dialogGroup.dialogMessage = storeGroup.store.state.user.failCode;
      dialogGroup.dialogVisible = true;
    }
  }
})
</script>

<template>
  <el-dialog
      v-model="dialogGroup.dialogVisible"
      title="Tips"
      width="30%"
  >
    <span>{{ dialogGroup.dialogMessage }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogGroup.dialogVisible = false">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <div class="login">
    <div class="container">
      <el-row>
        <el-col :offset="4" :span="6">

        </el-col>
        <el-col :offset="3" :span="6">
          <form class="login-form" onsubmit="return false">
            <div class="title">
              <p>登录</p>
            </div>
            <div class="head">
              <p>欢迎来到车之家</p>
              <span>没有账号？</span>
              <a class="login" @click="routerGroup.linkRegister()">立刻注册</a>
            </div>
            <div class="actual-from">
              <div class="input-wrap">
                <!--minlength最小输出长度，autocomplete允许浏览器自动输入或者禁止复制粘贴,required是防止未输入该输入框就提交表单-->
                <input id="login_account" v-model="loginGroup.account" autocomplete="off" class="input-field" minlength="6"
                       placeholder="账号"
                       required type="text">
                <label for="login_account"></label>
              </div>
              <div class="input-wrap">
                <input id="login_password" v-model="loginGroup.password" autocomplete="off" class="input-field" placeholder="密码"
                       required type="password">
                <label for="login_password"></label>
              </div>
              <button class="login-btn" @click="loginGroup.userLogin()">登录</button>
            </div>
          </form>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<style scoped src="../css/account.css">

</style>
